<template>
  <el-form-item :class="getClz()" :prop="opt.name" v-if="!opt.hide" v-bind="opt.itemProps"  >
    <div slot="label" style="display: inline-block">{{opt.text}}<el-popover v-if="Boolean(opt.textLabel)" placement="top" trigger="hover"><div>{{opt.textLabel}}</div><i slot="reference" class="el-icon-warning" /></el-popover></div>
    <el-input v-model="data[opt.name]"
      :name="opt.name"
      :placeholder="opt.props.disabled?'':opt.placeholder"
      v-bind="opt.props"
      :show-word-limit="Boolean(opt.props.maxlength)"
      @blur="onBlur(data,column)"
      @change="onChange(data,column)"
      @keyup.enter.native="onKeyup(data,column)"
      @dblclick.native="onDblclick(data,column)"
    >
    </el-input>

    <el-dialog
      :title="opt.batchProps.title"
      :visible.sync="batchOpen"
      :modal="true"
      :modal-append-to-body="true"
      :close-on-click-modal="true"
      :close-on-press-escape="false"
      :show-close="false"
      :width="opt.batchProps.width"
      :before-close="batchCancel"
      append-to-body
    >
      <el-input type="textarea" show-word-limit
          :rows="10"
          :placeholder="opt.batchProps.placeholder"
          :maxlength="opt.batchProps.limit"
          v-model="batchValue"/>
      <div class="fl-right" style="margin-top:16px;">
        <el-button type="primary" @click="batchConfirm">确 定</el-button>
        <el-button @click="batchCancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-form-item>
</template>

<script>
    import extend from '../extend';
    let Log = ()=>{};

    export default {
      name: "FormInputBatch",
      mixins:[extend],
      data(){
        return {
          batchOpen:false,
          batchValue:'',
          opt:{
            name:'',
            text:'',
            className:'',
            itemProps:{},
            props:{
              type:'text',
              disabled:false
            },
            batchProps:{},
            hide:false,
            placeholder:''
          }
        }
      },
      created(){
        this.onBlur = this.column.onBlur||Log;
        this.onChange = this.column.onChange||Log;
        this.onKeyup = this.column.onKeyup||Log;
      },
      methods:{
        setValue(val){
          this.data[this.opt.name] = val;
        },
        onDblclick(d){
          let opt = this.opt.batchProps || {};
          opt.title || (opt.title = this.opt.text);
          opt.width || (opt.width = '40%');
          opt.limit || (opt.limit = 2000);
          opt.placeholder || (opt.placeholder = `请输入${this.opt.text}`);
          //
          this.batchValue = (d[this.opt.name] || '').replaceAll(/[\uFF0C|\,]/g, '\n');
          this.batchOpen = true;
        },
        batchConfirm(){
          this.setValue(this.batchValue.replaceAll(' ', '').replaceAll('\n', ','));
          this.onKeyup(this.data,this.column);
          this.batchOpen = false;
        },
        batchCancel(){
          this.batchOpen = false;
        }
      }
    }
</script>
